<template>
	<view class="container">
		<steps 
			typeCode="WuZiLingYong" 
			apiname="getPermitGoodsGet"
			:apiparam="apiparam" 
			:brief="brief" 
			:notEmpty="checkFiled"
			@confirm="confirm"
			:disabled="false"
			:insflowid="insflowid">
			<view class="container__list" style="padding: 10rpx 20rpx;box-sizing: border-box;">
				<view class="container__list--text">
					<text class="container__list--text-des">申请人</text>
				</view>
				<view class="container__list--time">
					<view class="container__list--time-text">
						<text>{{obsusername}}</text>
					</view>
				</view>
			</view>
			<view class="container__list">
				<view class="hover" hover-class="clickable">
					<view class="container__list--text">
						<text class="container__list--text-symbol">*</text>
						<text class="container__list--text-des">出库物资</text>
					</view>
					<view class="container__list--time">
						<view class="container__list--time-text" @click="select('','add')">
							<text v-if="!cbsname">请选择</text>
							<text v-else>{{cbsname}}</text>
						</view>
					</view>
					<view class="container__list--icon">
						<u-icon name="arrow-right" size="20"></u-icon>
					</view>
				</view>
			</view>
			<view class="container__list" style="padding: 20rpx;box-sizing: border-box;">
				<view class="" style="">
					<view class="container__list--text">
						<text class="container__list--text-symbol">*</text>
						<text class="container__list--text-des">出库数量：</text>
					</view>
				</view>
				<view style="display: flex;justify-content: space-between;margin-top: 20rpx;">
					<view class="" style="display: flex;flex: 1;justify-content: space-between;">
						<view class="">
							<text>剩余：</text>
							<text>{{totalNum}}</text>
						</view>
						<view class="" style="color: #007AFF;" @click="num = totalNum">全部</view>
					</view>
					<view class="" style="flex: 1;display: flex;justify-content: flex-end;">
						<number-box v-model="num" :min="0" :max="totalNum" @blur="numChange"></number-box>
					</view>
				</view>
			</view>
			<view class="container__list">
				<view class="hover" hover-class="clickable">
					<view class="container__list--text">
						<text class="container__list--text-symbol">*</text>
						<text class="container__list--text-des">使用部门</text>
					</view>
					<view class="container__list--time">
						<view class="container__list--time-text" @click="select({name:data.obsname,id:data.obsid},'obsname')">
							<text v-if="!obsname">请选择</text>
							<text v-else>{{obsname}}</text>
						</view>
					</view>
					<view class="container__list--icon">
						<u-icon name="arrow-right" size="20"></u-icon>
					</view>
				</view>
			</view>
			<view class="container__list">
				<view class="hover" hover-class="clickable">
					<view class="container__list--text">
						<text class="container__list--text-symbol">*</text>
						<text class="container__list--text-des">使用项目</text>
					</view>
					<view class="container__list--time">
						<view class="container__list--time-text" @click="select({name:data.wbsname,id:data.wbsid},'wbsname')">
							<text v-if="!wbsname">请选择</text>
							<text v-else>{{wbsname}}</text>
						</view>
					</view>
					<view class="container__list--icon">
						<u-icon name="arrow-right" size="20"></u-icon>
					</view>
				</view>
			</view>
			
		</steps>
	</view>
</template>

<script>
	import Steps from '@/pages/home/child/add-attend-apply/components/steps.vue'
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	import moment from 'moment'
	import DatetimePicker from '@/components/custom/datetime-picker/uni-datetime-picker.vue'
	import NumberBox from '@/components/custom/number-box/number-box.vue'
	
	export default {
		components: {
			Steps,
			DatetimePicker,
			NumberBox
		},
		data() {
			return {
				obsusername: _data.localData('name'),
				pxid: _data.localData('userid'),
				disabled: false,
				checkResult: '',
				data: {},
				insflowid: '',
				obsname: '',
				obsid: '',
				wbsname: '',
				wbsid: '',
				cbsname: '',
				num: 0,
				totalNum: 0,
				cbsData: {},//物资信息
			}
		},
		onLoad(options) {
			let that = this;
			if(options.data) {
				this.data = JSON.parse(options.data)
				this.insflowid = options.insflowid;
				this.obsname = this.data.obsname;
				this.obsid = this.data.obsid;
				this.wbsname = this.data.wbsname;
				this.wbsid = this.data.wbsid;
				this.cbsname = this.data.cbsname;
				this.num = this.data.num;
				this.cbsData.myid = this.data.myid;
				this.cbsData.ptype = this.data.ptype;
				this.cbsData.punit = this.data.punit;
				this.cbsData.cbsname = this.data.cbsname;
				this.getGoodsLeftNum();
			}
		},
		computed: {
			brief() {
				return '申请人：' + this.obsusername + '|物资：' + this.cbsname + '|数量：' + this.num
			},
			checkFiled() {
				return this.obsusername && this.cbsname && this.num && this.obsname && this.wbsname ? true : false
			},
			apiparam() {
				return {
					myid: this.cbsData.myid
				}
			}
		},
		methods: {
			/**
			 * 添加物资领用申请
			 */
			goodsGetApply(apiparam) {
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'goodsGetApply',
						code: 3,
						apiparam,
						success(res) {
							uni.showToast({
								title: '流程创建成功',
								icon: 'none'
							})
							resolve()
						}
					})
				})
			},
			/**
			 * 触发流程环节通知
			 */
			trigFlowStepNotice(apiparam) {
				let that = this;
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'trigFlowStepNotice',
						code: 2,
						apiparam,
						success() {
							
						}
					})
				})
			},
			/**
			 * 点击提交按钮申请流程后的回调
			 * @param {Object} v 回调参数
			 */
			confirm(v) {
				this.goodsGetApply({
					obsusername: this.obsusername,
					insflowid: v.insflowid,
					pxid: this.pxid,
					myid: this.cbsData.myid,
					ptype: this.cbsData.ptype,
					punit: this.cbsData.punit,
					cbsname: this.cbsData.cbsname,
					num: this.num,
					obsid: this.obsid,
					obsname: this.obsname,
					wbsid: this.wbsid,
					wbsname: this.wbsname,
				}).then(() => {
					this.trigFlowStepNotice({
						insflowid: v.insflowid,
					})
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/home/child/goods-get/index?data=' + JSON.stringify(v)
						})
					},500)
				})
			},
			/**
			 * 跳转到选择界面
			 * @param {Object} v
			 * @param {Object} t
			 */
			select(v,t) {
				uni.navigateTo({
					url: '../goods-in/select?data=' + JSON.stringify(v) + '&type=' + t
				})
			},
			//从下个页面选择的部门或项目
			editValue(v){
				if(v){
					console.log(v)
					if(v.type == 'obsname') {
						this.obsid = v.data[0].id;
					} else if(v.type == 'wbsname') {
						this.wbsid = v.data[0].id;
					}
					this[v.type] = v.data[0].name;
				}
			},
			/**
			 * 从下个页面选择的物资
			 * @param {Object} v 传参
			 */
			cbsList(v) {
				let that = this;
				if(v) {
					console.log(v);
					this.num = 0;
					this.cbsData = v.data;
					this.cbsname = v.data.cbsname;
					this.getGoodsLeftNum();
				}
			},
			/**
			 * 获取剩余物资数量
			 */
			getGoodsLeftNum() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getGoodsLeftNum',
					apiparam: {
						myid: this.cbsData.myid
					},
					success(res) {
						if(res.length) {
							that.totalNum = res[0].LeftNum;
						}
					}
				})
			},
			/**
			 * 输入框失去焦点事件,保留三位小数
			 * @param {Object} v 回调参数
			 */
			numChange(v) {
				let value = v.value + '';
				let valueArr = value.split('.')
				if(valueArr[1] && valueArr[1].length > 3) {
					valueArr[1] = valueArr[1].substring(0,3);
					let val = valueArr[0] + '.' + valueArr[1];
					this.num = val*1;
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		overflow-x: hidden;
		padding-bottom: 180rpx;
		
		&__list {
			background-color: #fff;
			position: relative;
			
			&--text {
				
				&-symbol {
					color: red;
					margin: 0 5rpx;
				}
				
				&-des {
					font-size: 30rpx;
				}
				
			}
			
			&--time {
				font-size: 32rpx;
				color: #aaa;
				margin-left: 20rpx;
				position: relative;
				height: 60rpx;
			}
			
			&--textarea {
				margin-left: 20rpx;
				font-size: 32rpx;
			}
			
			&--icon {
				position: absolute;
				right: 20rpx;
				top: 50%;
				transform: translateY(-50%);
				z-index: 9;
			}
		}
		
	}
	
	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
	}
	
	.hover {
		padding: 10rpx 20rpx;
	}
</style>
